<script setup lang="ts">
// =====================================================================================
// 二次封装 iconify/vue 图标库组件, 动态引用图标集
// 此图标模块支持使用以下图标库所有图标，且均按需编译
// -------------------------------------------------------------------------------------
//Icônes图标库 https://icones.js.org/collection/all
//iconify图标库 https://icon-sets.iconify.design/
//其它可下载到本地使用的免费可商用图标库 http://www.remixicon.cn/ http://www.remixicon.com/
// -------------------------------------------------------------------------------------
// 官网 https://iconify.design/
// 包库 https://www.npmjs.com/package/@iconify/vue
// =====================================================================================

import type {
  IconifyIcon,
  IconifyIconOnLoad,
  IconifyIconCustomisations,
} from '@iconify/vue'

import { Icon as UiIconify } from '@iconify/vue'

interface IconProps extends IconifyIconCustomisations {
  icon: IconifyIcon | string
  id?: string
  style?: unknown
  onLoad?: IconifyIconOnLoad
  name?: string
  color?: string
  flip?: string
  align?: string
}

const props = defineProps<IconProps>()

let IconName: string = null
if (typeof props.icon == 'string') {
  IconName = props.icon
  const collections = [
    'mdi',
    'mdi-light',
    'ic',
    'ph',
    'icon-park-outline',
    'icon-park',
    'uil',
    'bx',
    'ri',
    'la',
    'iconoir',
    'jam',
    'ion',
    'bi',
    'clarity',
    'carbon',
    'cil',
    'gg',
    'tabler',
    'teenyicons',
    'fa-solid',
    'fa-regular',
    'vaadin',
    'icomoon-free',
    'eva',
    'pixelarticons',
    'majesticons',
    'ci',
    'eos-icons',
    'dashicons',
    'entypo',
    'zondicons',
    'flat-color-icons',
    'octicon',
    'codicon',
    'ant-design',
    'lucide',
    'fe',
    'radix-icons',
    'line-md',
    'system-uicons',
    'akar-icons',
    'uiw',
    'uim',
    'uit',
    'uis',
    'gridicons',
    'mono-icons',
    'heroicons-outline',
    'heroicons-solid',
    'file-icons',
    'mi',
    'ps',
    'el',
    'foundation',
    'typcn',
    'subway',
    'raphael',
    'icons8',
    'wpf',
    'iwwa',
    'topcoat',
    'ei',
    'bytesize',
    'fluent',
    'grommet-icons',
    'pepicons',
    'maki',
    'oi',
    'et',
    'vscode-icons',
    'fontisto',
    'fa',
    'zmdi',
    'whh',
    'si-glyph',
    'ls',
    'simple-line-icons',
    'flat-ui',
    'vs',
    'websymbol',
    'il',
    'bpmn',
    'fontelico',
    'feather',
    'noto',
    'noto-v1',
    'twemoji',
    'openmoji',
    'emojione',
    'emojione-monotone',
    'emojione-v1',
    'fxemoji',
    'logos',
    'cib',
    'simple-icons',
    'fa-brands',
    'brandico',
    'entypo-social',
    'cryptocurrency',
    'gis',
    'map',
    'geo',
    'cif',
    'fad',
    'wi',
    'healthicons',
    'medical-icon',
    'ep',
  ]

  IconName = IconName.replace(/([a-z])(\d+)/g, '$1-$2')
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .toLowerCase()
  IconName = IconName.replace(':', '-')
  const collection =
    collections.find((i) => {
      return IconName.startsWith(`${i}-`)
    }) ||
    collections.find((i) => {
      return IconName.startsWith(i)
    })

  if (collection) {
    IconName = IconName.replace(collection + '-', collection + ':')
  } else {
    IconName = null
  }
}
</script>

<template>
  <UiIconify v-bind="props" :icon="IconName ?? props.icon" />
</template>
